@charset "utf-8";
@import "../lib/hotcss-v2.0.1/imochen-hotcss/src/px2rem.scss";

$designWidth: 640;
.layer-interval {
  width: 100%;
  height: px2rem(16);
  background: #eeeeee;
}
header {
  .top-hd {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: px2rem(155);
    background: linear-gradient(to right, #910657, #f71c5a);
    img {
      display: block;
      height: px2rem(85);
      width: px2rem(85);
      border: 1px solid #c93675;
      box-sizing: border-box;
      border-radius: 50%;
    }
    h3 {
      text-align: center;
      margin-top: px2rem(5);
      display: block;
      color: #f4ccdb;
      font-size: px2rem(21);
      height: px2rem(21);
      line-height: px2rem(21);
    }
    .iconfont {
      position: absolute;
      color: #fbf6f6;
    }
    .icon-xiaoxi1 {
      top: px2rem(10);
      right: px2rem(84);

      font-size: px2rem(31);
    }
    .icon-config--shixin {
      top: px2rem(8);
      right: px2rem(22);
      font-size: px2rem(36);
    }
  }
  .top-bd {
    color: #fbf6f6;
    background: #b30973;
    ul {
      height: px2rem(70);
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      border-top: 1px solid #c1348a;
      border-bottom: 1px solid #c1348a;
      li {
        text-align: center;
        flex: 1 1 px2rem(75);
        .iconfont {
          display: block;
          font-size: px2rem(28);
          height: px2rem(28);
          line-height: px2rem(28);
        }
        span {
          margin-top: px2rem(6);
          display: block;
          font-size: px2rem(14);
          height: px2rem(14);
          line-height: px2rem(14);
        }
      }
    }
  }
}
main {
  background: #fcfcfc;
  margin-bottom: px2rem(162);
  .layer-order {
    .order-hd {
      height: px2rem(59);
      box-sizing: border-box;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 px2rem(23);
      .order-hd-l {
        display: flex;
        justify-content: start;
        align-items: center;
        .iconfont {
          color: #fbf6f6;
          background: #fc896b;
          height: px2rem(33);
          line-height: px2rem(33);
          width: px2rem(33);
          font-size: px2rem(26);
          border-radius: px2rem(3);
          text-align: center;
        }
        span {
          margin-left: px2rem(10);
          font-size: px2rem(25);
          line-height: px2rem(25);
          color: #383838;
        }
      }
      .order-hd-r {
        display: flex;
        justify-content: start;
        align-items: center;
        color: #898989;
        span {
          margin-right: px2rem(-5);
          line-height: px2rem(21);
          height: px2rem(21);
          font-size: px2rem(21);
          letter-spacing: px2rem(1.5);
        }
        .iconfont {
          font-size: px2rem(30);
          line-height: px2rem(50);
          height: px2rem(50);
        }
      }
    }
    .order-bd {
      ul {
        height: px2rem(113);
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        li {
          text-align: center;
          flex: 1 1 px2rem(75);
          .iconfont {
            display: block;
            font-size: px2rem(42);
            height: px2rem(42);
            line-height: px2rem(42);
          }
          span {
            margin-top: px2rem(8);
            display: block;
            font-size: px2rem(22);
            height: px2rem(22);
            line-height: px2rem(22);
          }
        }
      }
    }
  }
  .layer-wallet {
    .wallet-hd {
      height: px2rem(59);
      box-sizing: border-box;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 px2rem(23);
      .wallet-hd-l {
        display: flex;
        justify-content: start;
        align-items: center;
        .iconfont {
          color: #fbf6f6;
          background: #ffd670;
          height: px2rem(33);
          line-height: px2rem(33);
          width: px2rem(33);
          font-size: px2rem(26);
          border-radius: px2rem(3);
          text-align: center;
        }
        span {
          margin-left: px2rem(10);
          font-size: px2rem(25);
          line-height: px2rem(25);
          color: #383838;
        }
      }
      .wallet-hd-r {
        display: flex;
        justify-content: start;
        align-items: center;
        color: #898989;
        span {
          margin-right: px2rem(-5);
          line-height: px2rem(21);
          height: px2rem(21);
          font-size: px2rem(21);
          letter-spacing: px2rem(1.5);
        }
        .iconfont {
          font-size: px2rem(30);
          line-height: px2rem(50);
          height: px2rem(50);
        }
      }
    }
    .wallet-bd {
      ul {
        height: px2rem(112);
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        li {
          text-align: center;
          flex: 1 1 px2rem(75);
          p {
            letter-spacing: px2rem(2);
            font-size: px2rem(26);
          }
          span {
            margin-top: px2rem(8);
            display: block;
            font-size: px2rem(21);
            height: px2rem(21);
            line-height: px2rem(21);
          }
        }
      }
    }
  }
  .layer-menu {
    border-bottom: 1px solid #e5e5e5;
    .icon-zaixiankefu {
      background: #00c697;
    }
    .icon-xianshimiaosha {
      background: #d6d623;
    }
    .icon-weibiaoti2fuzhi05 {
      background: #7f47dd;
    }
    .icon-shoujichongzhi {
      background: #ff8a2f;
    }
    .icon-paimai {
      background: #00c697;
    }

    .menu-wrap {
      border-collapse: collapse;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 px2rem(23);
      height: px2rem(67);
      box-sizing: border-box;
      border-top: 1px solid #e5e5e5;
      //   border-bottom: 1px solid #e5e5e5;
      .menu-l {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont {
          display: inline-block;
          width: px2rem(35);
          height: px2rem(35);
          border-radius: 50%;
          color: #fcfcfc;
          font-size: px2rem(24);
          line-height: px2rem(35);
          text-align: center;
        }
        span {
          margin-left: px2rem(12);
          font-size: px2rem(25);
          line-height: px2rem(25);
        }
      }
      .menu-r {
        .iconfont {
          font-size: px2rem(30);
          line-height: px2rem(30);
          color: #898989;
        }
      }
    }
  }
}

footer {
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  .footer-list {
    background: #171717;
    color: #f6f6f6;
    ul {
      height: px2rem(84);
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        i {
          display: block;
          font-size: px2rem(46);
          width: 100%;
          height: px2rem(46);
          line-height: px2rem(46);
          text-align: center;
        }
        span {
          margin-top: px2rem(4);
          width: 100%;
          display: block;
          font-size: px2rem(18);
          height: px2rem(18);
          line-height: px2rem(18);
          text-align: center;
        }
        .icon-leimupinleifenleileibie {
          margin-left: px2rem(2);
        }
        .icon-gouwuche {
          margin-left: px2rem(-6);
        }
      }
    }
  }
}
